<template>
  <div class="product">
    <!-- 头部导航栏区域 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="服务产品" left-text="返回" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div class="content">
      <!-- 左侧导航栏区域 -->
      <div class="left">
        <van-sidebar v-model="activeKey" class="vanSider" @change="onChange">
          <van-sidebar-item
            :title="category.name"
            v-for="category in categoryData"
            :label="category.name"
            :value="category.id"
            :key="category.id"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <!-- 右侧产品展示区域 -->
        <div class="right">
          <van-card
            v-for="product in productData"
            :key="product.id"
            :price="product.price + '.00'"
            :desc="product.description"
            :title="product.name"
            :thumb="product.photo"
          >
            <template #footer>
              <van-stepper
                default-value="0"
                :min="0"
                v-model="product.number"
                @change="numberChangeHandler(product)"
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit(total)"
        button-color="purple"
      />
    </div>
  </div>
</template>

<script>
//引入辅助函数信息
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 左侧导航栏索引值
      activeKey: this.$route.query.activeKey,
      //传递栏目id
      categoryId: this.$route.query.categoryId,
    };
  },
  computed: {
    //使用辅助函数
    //获取栏目数据
    ...mapState("category", ["categoryData"]),
    //获取产品数据
    ...mapState("product", ["productData"]),
    //获取购物车数据
    ...mapGetters("shopcart", ["total"]),
  },
  methods: {
    //引入产品栏目数据
    ...mapActions("category", ["getAllCategoryData"]),
    //引入根据栏目id获取产品数据的方法
    ...mapActions("product", ["getAllProductData"]),
    //引入购物车模块的方法
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),
    //获取产品数据
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 100,
        productCategoryId: this.categoryId,
      };
      //调用获取产品数据的方法
      this.getAllProductData(data);
    },
    //切换侧边栏获取对应的产品数据
    onChange(index) {
      //当侧边栏切换时 动态更新 categoryId
      this.categoryId = this.categoryData[index].id;
      this.queryProduct();
    },
    //监听步进器的数量变化
    numberChangeHandler(product) {
      //定义一个产品参数
      let orderLine = {
        productId: product.id,
        productName: product.name,
        price: product.price,
        number: product.number,
      };
      //调用添加购物车的方法
      this.addShopcart(orderLine);
    },
    //根据条件模糊查询产品信息
    queryCategoryData() {
      //定义参数
      let data = {
        page: 1,
        pageSize: 100,
      };
      //调整vuex中定义好的方法
      this.getAllCategoryData(data);
    },
    onSubmit(total) {
      this.$router.push({
        name: "orderConfirm",
      });
    },
    //返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    //自动获取产品栏目数据
    this.queryCategoryData();
    //获取产品数据
    this.queryProduct();
  },
};
</script>

<style scoped>
.content {
  display: flex;
}
.content .vanSider {
  width: 120px;
  text-align: center;
}
.content .right {
  flex: 1;
}
.bottom {
  position: fixed;
  bottom: 55px;
  width: 100%;
  height: 50px;
}
.bottom div {
  position: relative;
}
</style>